<script lang="ts" setup>
import {ref, computed} from "vue";

const emit = defineEmits<{
  (event: "choose", value: any): void;
}>();

const props = defineProps({
  data: {},
  modelValue: {}
})



const activeName = ref(props.modelValue)

const handleClick = (tab, event) => {
  console.log(tab.paneName);
  emit("choose", tab.paneName);
}
</script>

<template>
  <div class="range-container">
    <ElTabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in data" :label="tab.label" :name="tab.value"/>
    </ElTabs>
  </div>
</template>

<style scoped lang="scss">
.range-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
:deep(.el-tabs__item) {

  padding: 0 22px !important;
  color: #6b778c;
}
</style>
